<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Relativity Simulator</title>
        <!--[if lt IE 9]>
        <script type="text/javascript" src="../lib/ie7/ie9.js"></script>
        <script type="text/javascript" src="../lib/FlashCanvas/bin/flashcanvas.js"></script>
        <![endif]-->
        <script type="text/javascript" src="../lib/jquery/jquery.js"></script>
        <script type="text/javascript" src="../lib/kibo.js"></script>
        <script type="text/javascript" src="js/ieLibs.js"></script>
        <script type="text/javascript" src="js/extendedObject.js"></script>
        <script type="text/javascript" src="../lib/glMatrix-0.9.5.min.js"></script>
        <script type="text/javascript" src="js/glMatrix-extensions.js"></script>
        <script type="text/javascript" src="js/inertialObject.js"></script>
        <script type="text/javascript" src="js/photon.js"></script>
        <script type="text/javascript" src="js/relLibs.js"></script>
        <script type="text/javascript" src="js/fourEvent.js"></script>
        <script type="text/javascript" src="js/colors.js"></script>
        <script type="text/javascript" src="js/interface.js"></script>
        <script type="text/javascript" src="js/audio.js"></script>
        <script type="text/javascript" src="js/scene.js"></script>
        <script type="text/javascript" src="js/shapes.js"></script>
        <script type="text/javascript" src="../lib/jquery/jquery-ui-1.8.16.custom.min.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/ui-lightness/jquery-ui-1.8.16.custom.css" />
        <link rel="stylesheet" type="text/css" href="relativity.css" />
    </head>

    <body>
      <header>
        <ul id="views">
          <li id="view-2d" class="nav-active" title="View this demonstration in 2D">2D</li>
          <li id="view-minkowski" title="View a Minkowski diagram of this demonstration">Minkowski</li>
          <!-- <li id="view-3d" title="View this demonstration in 3D">3D</li> -->
        </ul>
        <ul id="tools">
          <li id="demo-chooser-activate">Choose new demo</li>
          <li id="settings-activate">Settings</li>
          <li id="help">Help</li>
        </ul>
      </header>
      <div id="settings">
        <label for="doppler">Doppler:</label>
        <select id="doppler">
          <option value="default" selected="selected">Use default</option>
          <option value="always">Always on</option>
          <option value="never">Always off</option>
        </select>
        <label for="framePos">Absolute positions:</label>
        <select id="framePos">
          <option value="default" selected="selected">Use default</option>
          <option value="always">Always on</option>
          <option value="never">Always off</option>
        </select>
        <label for="vPos">Apparent positions:</label>
        <select id="vPos">
          <option value="default" selected="selected">Use default</option>
          <option value="always">Always on</option>
          <option value="never">Always off</option>
        </select>
        <label for="debug">Debug mode:</label>
        <input id="debug" type="checkbox" />
      </div>

        <div style="position:relative">
            <canvas id="canvas-2d" height="500">
              <p>You need a browser that supports canvas to view this simulation.</p>
              <p>Firefox 3.6+, a recent version of Google Chrome, Safari 4+ or Opera 10+ are recommended.</p>
              <p>Firefox 2+, any version of Google Chrome, Safari 3.2+, Opera 9+ and IE8 should work with some missing features.</p>
            </canvas>
            <canvas id="canvas-minkowski" height="500"></canvas>
            <canvas id="canvas-3d" height="500"></canvas>
            <!--[if IE 8]>
            <div style="width:1000px;height:500px;position:absolute;float:left;z-index:6000;" onclick="clickHandler(event)">&nbsp;</div>
            <![endif]-->
            <div id="controls">
              <button id="pause" class="button-highlight">Play</button><button id="replayStep">Replay</button>
              <div id="speed">Speed: <span id="curSpeed"></span><div><a href="#" id="slowDown">-</a><div id="speed-slider"></div><a href="#" id="speedUp">+</a></div></div>
              <button id="prevStep">&laquo; Previous</button>
              <button id="nextStep">Next &raquo;</button>
              <span id="narrated" class="no-narration">Narrated</span>
            </div>
        </div>
        <div id="demo-chooser">
          <h3>Choose a demo</h3>
            
        </div>
        <div id="help-screen">
          <a class="close" href="#" onclick="$('#help-screen').toggle(); return false">Close</a>
          <h3>Keyboard Controls</h3>
          <dl>
            <dt>w, a, s and d, or arrow keys</dt>
            <dd>Accelerate<br/></dd>
            <dt>q, e</dt>
            <dd>Rotate left and right (yaw)<br/></dd>
            <dt>3</dt> 
            <dd>Show 3D view<br/></dd>
            <dt>t</dt>
            <dd>Toggle clock display<br/></dd>
            <dt>p</dt>
            <dd>Toggle coordinate display<br/></dd>
            <dt>Page up/down</dt>
            <dd>Zoom in and out<br/></dd>
            <dt>h</dt>
            <dd>Toggle help screen</dd>
          </dl> 
          Press Next to advance to the next step in a demonstration.
        </div>
        <div id="zoom">
          <a href="#" id="zoomIn">+</a>
          <div id="zoom-slider"></div>
          <a href="#" id="zoomOut">-</a>
        </div>

        <div id="caption">
          <p id="caption-text">Welcome to the jsphys relativity simulator. Choose a demonstration to start with and hit Play.</p>
        </div>
        <script type="text/javascript">
          /* load canvas.text.js only when needed */
          if($('#canvas-2d')[0].getContext && !$('#canvas-2d')[0].getContext("2d").fillText) {
          document.write('<script src="../lib/canvas-text/canvas.text.js" type="text/javascript"></s' + 'cript>');
          document.write('<script src="../lib/canvas-text/faces/helvetiker-normal-normal.js" type="text/javascript"></s' + 'cript>');
          document.write('<script src="../lib/canvas-text/faces/optimer-normal-normal.js" type="text/javascript"></s' + 'cript>');
          }
		</script>
    </body>
</html>